<template>
	<div id="signin">
		<div class="cover">
			<div id="left">
				<div id="leftTop">
					<!--有三个圆-->
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
				<div id="leftBottom">
					<!--三个图标-->
					<ul>
						<li>
							<i class="fa fa-camera-retro" ></i>
							<span>彩票资讯</span>
						</li>
						<li>
							<i class="fa fa-university" aria-hidden='true'></i>
							<span>彩票管理</span>
						</li>
						<li>
							<i class="fa fa-cog" aria-hidden='true'></i>
							<span>彩票工具</span>
						</li>
						<li>
							<i class="fa fa-bar-chart" aria-hidden='true'></i>
							<span>数据图表</span>
						</li>
					</ul>
				</div>
			</div>
			<div id="right">
				 <!-- 使用el-form表单验证
                    model: 是要验证的对象
                    rules: 要验证的各种规则
                    ref: 给el-form元素标记,方便确定是否全部通过验证
                 -->
				<el-form :model='userInfo' :rules='rules' ref="userInfo">
					<ul>
						<li style="font-size: 50px; color: white;margin-bottom: 80px;">可米彩票</li>
						<li style="width: 80%;">
							 <!-- 
					                            如果要验证el-form表单里的元素,这些元素
					                            就需要放到el-form-item元素
					                            其中el-form-item元素的prop属性和
					                            验证规则里的属性名保持一致,
					                            也就是你想验证哪个属性就和哪个验证属性名保持一致
                         -->
                         <el-form-item prop='accountName'>
                         	<el-input class='userInput' placeholder="请输入用户名"
                         		v-model="userInfo.accountName"/>
                         </el-form-item>
							
						</li>
						<li style="width: 80%;">
							<el-form-item prop='password'>
								<el-input class='userInput' type="password" placeholder="请输入用户名"
									v-model="userInfo.password"/>
							</el-form-item>
							
						</li>
						<li style="text-align: left;padding-left: 0px;">
							<el-switch active-color="#13ce66"
								inactive-color="#ff4949"
                            	v-model="remember">
		
							</el-switch>
							<span style="color:white;margin-left:10px">
								记住密码
							</span>
						</li>
						<li>
							<el-button style="width:100%" type="primary" @click="signin">
								登录
							</el-button>
						</li>
					</ul>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script >
	export default{
		data(){
			return{
				userInfo:{},
				rules:{
					//校验用户名规则
					accountName:[
						{require:true,message:'用户名不能为空',trigger:'blur'},
						{min:2,max:12,message:'不能少于2个字符',trigger:'blur'}
					],
					//校验密码
					password:[
						{require:true,message:'密码不能为空',trigger:'blur'},
						{min:5,max:12,message:'不能少于5个字符',trigger:'blur'}
					]
				},
				remember:true
			}
		},
		 methods: {
        	signin(){
	            this.$refs['userInfo'].validate((valid) => {
	            if (valid) {
	                // 当所有的验证通过之后,执行这个代码块
	                this.$http.post(this.$apis.signin,this.userInfo)
	                .then((resp)=>{
	                    console.log(resp);
	                    //判断登陆成功，将返回的数据存储到localStorage本地记录，创建token
						if(resp.data.success){
							//记住密码
							localStorage.setItem('remember',this.remember);
							//令牌
							localStorage.setItem('token',resp.data.token);
							//返回的数据，得到的是对象，转换为字符串数组
							localStorage.setItem('response',JSON.stringify(resp.data.response));
							//判断是否有重定向路径，登录成功后跳转
							if(this.$route.query.redirect){
								console.log(this.$route.query.redirect)
								 this.$router.push(this.$route.query.redirect);
							}
							else{
								//否则返回home页面
								this.$router.push('/home');
							}
						}
						else{
							//登录失败
							this.$message.error('登录失败');
						}
	                })
	            } else {
	                // 如果还有未通过验证的,则执行该代码块
	                // console.log('error submit!!');
	                console.log("还有未通过验证的,请注意");
	                return false;
	            }
	            });
           
        }
    }
}
</script>

<style lang="scss" scoped>
	#signin{
		width: 100%;
		height: 100%;
		background:url("../../assets/loginBG.jpg") no-repeat;
		background-size: cover;
		.cover{
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			display: flex;
			flex-direction: row;
			#left{
				width: 70%;
				height: 100%;
				#leftTop{
					width: 100%;
					height: 70%;
					display: flex;
					justify-content: center;
					align-items: center;
					.circle{
						width: 200px;
						height: 200px;
						border-radius: 50%;
						/*当前元素下*/
						&:nth-child(1){
							position: absolute;
							top: 20%;
							background: rgba(240,197,158,0.3);
						}
						&:nth-child(2){
							position: absolute;
							top: 35%;
							left:33%;
							background: rgba(85, 212, 191,0.3);
						}
						&:nth-child(3){
							position: absolute;
							top: 35%;
							left: 23%;
							background: rgba(82, 89, 197,0.3);
						}
					}	
				}
				#leftBottom{
					width: 100%;
					height: 30%;
					ul{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: row;
						justify-content: center;
						li{
							display: flex;
							flex-direction: column;
							color: rgba(255,255,255,0.5);
							margin-left: 80px;
							span{
								margin-top: 20px;
								text-align: center;
							}
							i{
								font-size: 60px;
							}
						}
					}	
				}
			}
			#right{
				width: 30%;
				height: 100%;
				background: rgba(0,0,0,0.7);
				ul{
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					padding-top: 150px;
					li{
						text-align: center;
						margin-bottom:20px;
						width: 80%;
						.userInput{
							width: 100%;
							text-align: center;
							.el-input__inner{
								background: rgba(0,0,0,0);
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
</style>